<!--hmc 发放优惠券组件-->
<template>
  <div class="page-container page-container-create">
    <div class="stepset">
      <div class="color333 font18">
        发放红包
      </div>
    </div>
    <div>
      <div>
        <el-form :model="ruleForm" size="mini" ref="ruleForm">
          <el-form-item >
            <span class="color333 font16 ml15">活动ID：</span>
            <span class="color333 font16">{{dataForm.promotionId}}</span>
          </el-form-item>

          <el-form-item  class="w178 mt30">
            <span class="color333 font16">活动名称：</span>
            <span class="color333 font16">{{dataForm.promName}}</span>
          </el-form-item>

          <el-form-item  v-if="dataForm.startTime != null && dataForm.endTime != null && dataForm.startTime != '' && dataForm.endTime != ''">
            <span class="color333 font16">活动时间：</span>
            <span class="color333 font16">{{dataForm.startTime}} ~ {{dataForm.endTime}}</span>
          </el-form-item>

          <el-form-item class="w178 mt30" v-if="dataForm.couponStartTime != null && dataForm.couponStartTime !='' && dataForm.couponEndTime != null && dataForm.couponEndTime !=''">
            <span class="color333 font16 ml15">有效期：</span>
            <span class="color333 font16">{{dataForm.couponStartTime}} ~ {{dataForm.couponEndTime}}</span>
          </el-form-item>
        </el-form>
      </div>
      <div class="flex mt30">
        <span class="color333 font16 mr5">触达方式：</span>
        <el-checkbox-group v-model="checkList">
          <el-checkbox label="短信" disabled></el-checkbox>
          <el-checkbox label="邮件" disabled></el-checkbox>
        </el-checkbox-group>
      </div>
      <div class="tab-container mt30">
        <el-tabs v-model="activeName" ref="tabs">
          <el-tab-pane v-for="item in tabList" :key="item.key" :label="item.label" :name="item.key"></el-tab-pane>
        </el-tabs>
      </div>
      <div v-show="activeName=='0' && checkList.indexOf('短信') != -1">
        <el-form :model="ruleForm" size="mini" ref="ruleForm">
          <el-form-item prop="smsSelect" class="w178 mt30">
            <span class="color333 font16">短信模板：</span>
            <span class="color333 font16">{{sendCouponDataForm.smsJson.templateName}}</span>
          </el-form-item>
          <el-form-item :required="true" class="w178 mt30 txt flex-inner">
            <span class="color333 font16 title">短信内容：</span>
            <span class="color333 font16 lh24" v-html="sendCouponDataForm.smsJson.previewContent"></span>
          </el-form-item>
        </el-form>
      </div>
      <div v-show="activeName=='1' && checkList.indexOf('邮件') != -1">
        <el-form :model="ruleForm" size="mini" ref="ruleForm">
          <el-form-item prop="emailSelect" class="w178 mt30">
            <span class="color333 font16">邮件模板：</span>
            <span class="color333 font16">{{sendCouponDataForm.mailJson.templateName}}</span>
          </el-form-item>
          <el-form-item class="w178 mt30 flex">
            <span class="color333 font16">邮件标题：</span>
            <span class="color333 font16">{{sendCouponDataForm.mailJson.title}}</span>
          </el-form-item>
          <el-form-item class="w178 mt30 txt flex-inner" :required="true">
            <span class="color333 font16 title">邮件内容：</span>
            <span class="color333 font16 lh24"  v-html="sendCouponDataForm.mailJson.previewContent"></span>
          </el-form-item>
        </el-form>
      </div>
    </div>
    <div class="save t_c mt30">
      <el-button type="primary" @click="handleClose()">确定</el-button>
    </div>
  </div>
</template>

<script>
export default {
  name: "sendCoupon",
  components: {},
  props: {
    journeyId: {
      type: String,

      default: '',
    },
    nodeInfo:{
      type: Object
    }
  },
  data() {
    return {
      checkList: ["短信", "邮件"],
      active: 1, //初始选中
      activeName: 0,
      tabList: [
        { label: "短信", key: "0" },
        { label: "邮件", key: "1" }
      ],
      //表单规则
      ruleForm: {
        smsSelect: null,
        emailSelect: null,
      },
      //下拉
      smsList:[],
      emailList: [],
      //select 值
      value: "",
      //短信内容
      textarea: "",
      sendCouponDataForm:{
        smsJson:{
          params:{

          },
          testPhone: ""
        },
        mailJson:{
          title:"",
          params:{
            
          },
          testMail:""
        },
      },
      //短信模版内容
      smsContent: "",
      smsParams:[],
      //邮件模版内容
      mailContent: "",
      mailParams:[],
      mailParamsForm:{
        params:'',
        key:'', // 参数名称
      },

      dataForm:{

      }

    };
  },

  methods: {
    //子关闭 标签选择弹框
    handleClose() {
      this.$emit("handleClose", false);
    },
    /**
     * 状态格式化
     */
    statusFormat(row) {
      if (
        row.status == 1 &&
        new Date().getTime() <= new Date(row.startTime).getTime()
      ) {
        //待提交
        return 11;
      } else if (
        row.status == 2 &&
        new Date().getTime() <= new Date(row.startTime).getTime()
      ) {
        //待审核
        return 12;
      } else if (
        row.status == 11 &&
        new Date().getTime() <= new Date(row.startTime).getTime()
      ) {
        //未开始
        return 13;
      } else if (
        row.status == 4 &&
        new Date().getTime() <= new Date(row.startTime).getTime()
      ) {
        //审核未通过
        return 14;
      } else if (
        row.status == 11 &&
        new Date().getTime() >= new Date(row.startTime).getTime() &&
        new Date().getTime() <= new Date(row.endTime).getTime()
      ) {
        //进行中
        return 15;
      } else if (
        (row.status == 1 || row.status == 2 || row.status == 4) &&
        new Date().getTime() > new Date(row.startTime).getTime()
      ) {
        //已过期
        return 16;
      } else if (
        row.status == 11 &&
        new Date().getTime() > new Date(row.endTime).getTime()
      ) {
        //已结束
        return 17;
      }
    },
    //换页刷新
    refreshPageRequest(val){
        this.tablePagination.start = val;
        this.getCouponList();
    },
    //子关闭 标签选择弹框
    changeDialog() {
      this.$emit("changeCouponDlg", false);
    },
    queryInfo(){
        this.utils.request.getBranchNodeDetail({branchNodeId: this.nodeInfo.nodeId}, res=>{
          if(res.code == '0000'){
            if(res.data.nodeVariable != null || res.data.nodeVariable != ''){
                //回显数据
                let data = JSON.parse(res.data.nodeVariable);
                this.dataForm.promotionId = data.promotionId;
                this.dataForm.promName = data.promName;
                this.dataForm.startTime = data.startTime;
                this.dataForm.endTime = data.endTime;
                this.dataForm.couponStartTime = data.couponStartTime;
                this.dataForm.couponEndTime = data.couponEndTime;
                this.checkList = [];
                //回显reachType
                let reachType = data.reachType.split(",");
                if(reachType.indexOf("1") != -1){
                  //回显短信
                  this.checkList.push("短信")
                  this.sendCouponDataForm.smsJson = data.smsJson;
                  this.sendCouponDataForm.smsJson.previewContent = this.sendCouponDataForm.smsJson.previewContent.replace(/<p>(.*?)<\/p>/g, '<span>$1</span>');
                }
                if(reachType.indexOf("3") != -1){
                  //回显邮件
                  this.checkList.push("邮件")
                  this.sendCouponDataForm.mailJson = data.mailJson;
                  this.sendCouponDataForm.mailJson.previewContent = this.sendCouponDataForm.mailJson.previewContent.replace(/<p>(.*?)<\/p>/g, '<span>$1</span>'); 

                }
            }
          }
        })
    },
  },

  mounted() {
    this.queryInfo();
  },
  watch:{
    checkList: function(){
      if(this.checkList.indexOf("短信") == -1){
        this.$refs.tabs.$children[0].$refs.tabs[0].style.display = 'none';
        this.activeName = '1'
      }else{
        this.$refs.tabs.$children[0].$refs.tabs[0].style.display = 'inline-block';
        this.activeName = '0'
      }
      if(this.checkList.indexOf("邮件") == -1){
        this.$refs.tabs.$children[0].$refs.tabs[1].style.display = 'none';
        this.activeName = '0'
      }else{
        this.$refs.tabs.$children[0].$refs.tabs[1].style.display = 'inline-block';
        this.activeName = '1'
      }
    }
  },
  created() {
  },
};
</script>
<style lang="scss" scoped>
.stepset {
  ul {
    width: 460px;
  }
  .flex {
    display: flex;
    justify-content: flex-start;
    align-items: center;
  }
}
.el-checkbox {
  margin-right: 30px;
}
/deep/ .el-form {
  .el-form-item {
    margin-top: 30px;
  }
  .btns {
    .el-button {
      margin: 0 30px 0 0;
    }
  }
  .txt {
    /deep/ .el-form-item {
      margin-top: 0px;
    }
    .flex {
      line-height: 3;
      padding: 15px;
      // border: 1px solid #dcdfe6;
      border-radius: 4px;
    }
    .el-textarea {
      width: auto;
    }
  }
  .phone {
    .el-form-item__content {
      display: flex;
      justify-content: flex-start;
    }
  }
  .textareaParm{
    -webkit-appearance: none;
    background-color: #FFF;
    background-image: none;
    border-radius: 4px;
    border: 1px solid #DCDFE6;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    color: #606266;
    display: inline-block;
    font-size: inherit;
    outline: 0;
    padding: 0 15px;
    -webkit-transition: border-color .2s cubic-bezier(.645,.045,.355,1);
    transition: border-color .2s cubic-bezier(.645,.045,.355,1);
  }
  .buttonParm{
    padding: 0 16px !important;
    border-radius: 4px;
    height: 32px !important;
    line-height: 32px !important;
    font-size: 14px !important;
    background: #FFF;
    border: 1px solid #DCDFE6;
    color: #606266;
    background: #66b1ff;
    border-color: #66b1ff;
    color: #FFF;
    display: inline-block;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    -webkit-appearance: none;
    text-align: center;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    outline: 0;
    margin: 0;
    -webkit-transition: .1s;
    transition: .1s;
    font-weight: 500;
    padding: 12px 20px;
    font-size: 14px;
    border-radius: 4px;
  }
}
</style>

